<template>
	<view class="notice">
		<view class="box">
			<view class="wrap" v-for="(item, index) in list" :key="index">
				<view class="time tac">{{item.createtime | handleData}}</view>
				<view class="list">
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.content}}</view>
					<view v-if="item.notice_type" class="bun-box">
						<view v-if="item.is_garee == 0" class="" @click="agree_completion(1,item.id)">
							同意
						</view>
						<view v-if="item.is_garee == 0" class="" @click="agree_completion(2,item.id)">
							拒绝
						</view>
						<view v-if="item.is_garee == 1" class="">
							已同意
						</view>
						<view v-if="item.is_garee == 2" class="">
							已拒绝
						</view>
					</view>
					<view v-else class="btn tac">查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { agreeCompletion } from '@/api/love.js'
	import {
		readNum,
		getNoticeList
	} from "../../api/im.js";

	export default {
		name: 'notice', // 通知
		data() {
			return {
				page : 1,
				total: 0,
				list: []
			}
		},
		/**
		 * 刷新
		 */
		onPullDownRefresh() {
			this.page = 1;
			this.list = []
			this.getData()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData()
			}
		},
		
		onLoad() {
			this.changeReadNumData()
			this.getData()
		},
		methods: {
		
			/**
			 * 网络请求
			 */
			async getData() {
				let res = await getNoticeList(this.page)
				this.total = parseInt(res.data.total)
				if (this.page == 1) {
					this.list = res.data.data
				} else {
					this.list = [...this.list, ...res.data.data]
				}
			},
			/**
			 * 未读变已读
			 */
			async changeReadNumData() {
				await readNum("notice_read")
			},
			async agree_completion(is_agree,id){
				await agreeCompletion({
					'is_agree': is_agree,
					'notice_id':id
				}).then(res => {
					console.log('处理补全', res);
					uni.showToast({
						'duration':1500,
						'icon':'none',
						'title':res.msg
					})
					this.updateItemIsGareeLocally(res.data);
				});
			},
			updateItemIsGareeLocally(updatedItem) {
			    const index = this.list.findIndex(item => item.id === updatedItem.id);
			    if (index !== -1) {
			      // 更新 item.is_garee 的值
			      this.$set(this.list, index, updatedItem);
			    }
			  }
		},
		filters: {
			// 时间
			handleData(time) {
				let dateObj = new Date(parseInt(time) * 1000);
				let year = dateObj.getFullYear();
				let month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
				let day = dateObj.getDate().toString().padStart(2, '0');
				let hour = dateObj.getHours().toString().padStart(2, "0");
				let min = dateObj.getMinutes().toString().padStart(2, "0");
				return year + "年" + month + "月" + day + "日" + " " + hour + ":" + min
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
</style>

<style lang="scss" scoped>
	.bun-box{
		display: flex;
		    flex-direction: row;
		    justify-content: space-around;
		    align-items: center;
		    padding: 14px 0 17px;
		    color: black;
	}
	.notice {
		width: 100%;

		.box {
			padding: 0 30rpx 30rpx;

			.time {
				font-size: 24rpx;
				color: #999999;
				margin: 40rpx 0 24rpx;
			}

			.list {
				padding: 40rpx 30rpx 0;
				background: #fff;
				border-radius: 30rpx;

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: $uni-text-color;
				}

				.desc {
					font-size: 28rpx;
					color: $uni-text-color-primary;
					line-height: 42rpx;
					padding: 28rpx 0;
				}

				.btn {
					padding: 28rpx 0 34rpx;
					border-top: 1px solid #EEE;
					font-size: 26rpx;
					color: $uni-text-color;
				}
			}
		}
	}
</style>